<template>

  <div class="main" style="width: 100%;height: 825px!important;display: flex">

    <div style="width: 70%;border-bottom: 1px solid #F2F2F2;">
      <!--日历-->
      <el-calendar v-model="value">
        <div
            @click="allCalendar(date)"
            slot="dateCell"
            slot-scope="{date, data}">
          <p :class="data.isSelected ? 'is-selected-1' : ''">
            {{ data.day.split('-').slice(2).join('-') }}
            <!--            {{ data.isSelected ? '牛逼' : ''}}-->
          </p>
        </div>
      </el-calendar>

      <!--统计信息-->
      <div class="statisticsLine">
        <p class="section-title mb-40">数据统计：</p>
        <el-row :gutter="20">
          <el-col :span="6">
            <div>
              <el-statistic group-separator=","   :value="statisticsData.handleClassCount">

                <template #title>
                  <div class="custom-title">接入班级</div>
                </template>
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: #67C23A"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic group-separator=","   :value="statisticsData.correctAnswerPaperCount">
<!--                :precision="1"-->
                <template #title>
                  <div class="custom-title">已批答卷</div>
                </template>
                <template slot="suffix">
                  <i class="el-icon-document-checked" style="color: #409EFF"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>

<!--          <el-col :span="6">-->
<!--            <div>-->
<!--              <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value2" :title="title">-->
<!--                <template #title>-->
<!--                  <div class="custom-title">已批答卷</div>-->
<!--                </template>-->
<!--                <template slot="suffix">-->
<!--                  <i class="el-icon-document-checked" style="color: #409EFF"></i>-->
<!--                </template>-->
<!--              </el-statistic>-->
<!--            </div>-->
<!--          </el-col>-->

          <el-col :span="6">
            <div v-if="examData.length!=0">
<!--              <el-statistic :value="new Date(examData[0].startTime).getTime()" time-indices title="商品降价">-->
<!--                <template slot="suffix"> 抢购即将开始</template>-->
<!--              </el-statistic>-->
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div style="width: 30%;">
      <div
          style="border-bottom: 1px solid #F2F2F2;border-left: 1px solid #F2F2F2;height: 52px;display: flex;align-items: center;justify-content: center">
        日程表
      </div>
      <!--日程列表-->
      <el-timeline  v-loading="loading" v-if="this.examData.length!=0" style="margin-top: 20px">
        <div v-for="(item,index) in examData" :key="item.id">
          <el-timeline-item style="text-align: start;height: 200px" :timestamp="item.startTime" placement="top">
            <el-card>
              <div style="height: 100%;display: flex;align-items: center">
                <p style="font-size: 17px;font-weight: 550">{{ item.examName }}</p>
                <p style="margin-left: 10px;margin-bottom: 10px;color: #707070;">-
                  {{ item.paper.paperTitle }}</p>
              </div>
              <p style="font-size: 12px"> {{ formatUpdateTime(item.updateTime) }} </p>

              <div style="display: flex;align-content: space-between;width: 100%">

                <p style="color: #707070;text-align: start;height: 100%;width: 320px!important; ">
                  {{ item.handleClass.school.schoolName }}
                  {{ item.handleClass.year }}级
                  {{ item.handleClass.majorName }} {{ item.handleClass.classNum }}班
                </p>

                <el-statistic
                   class="secondTime"
                  :value-style="valueStyle"
                  v-if="new Date() < new Date(item.startTime)"
                  :value="new Date(item.startTime).getTime()"
                  format="HH:mm:ss"
                  title=""
                  time-indices
              ></el-statistic>
                <span v-else-if="new Date() > new Date(item.endTime)" style="color: #F56C6C;margin-top: 7px;margin-left: 7px"><el-tag
                    type="info">已结束</el-tag></span>
                <span v-else ><el-tag type="success"  style="color: #F56C6C;margin-top: 7px;margin-left: 7px" >考试中</el-tag></span>
              </div>
            </el-card>
          </el-timeline-item>

        </div>

      </el-timeline>

      <!--空状态列表-->
      <div v-else>
        <el-empty description="什么事都没有！"></el-empty>
      </div>
    </div>

  </div>


</template>

<script>

import {getExamListForTimeLineApi} from "@/api/Exam";

import {getMyHandleClassCountApi} from "@/api/handleClass";
import {getMyCorrectAnswerPaperCountApi} from "@/api/CorrectAnswerPaper";
import {Storage} from '@/utils/localStorage'
const storage = new Storage();

export default {
  name: "HomeView",
  data() {
    return {
      valueStyle: {
        fontSize: '15px',
        color: '#409EFF',
        textAlign:'end',
        height:'30px',
        marginTop:'20px',
      },
      //日程加载的逻辑量
      loading:true,
      value: new Date(),
      examData: [],
      value2: 130587135,
      title: "这是标题",
      secondData: '',
      userData: [],
      statisticsData:{
        handleClassCount:'',
        correctAnswerPaperCount:''
      }
    }
  },
  methods: {
    getSecond() {
      setTimeout("1313", 1313)
      for (let i = 0; i < this.examData.length; i++) {
        const item = this.examData[i];
        console.info(item, "遍历日期");
      }
    },
    formatUpdateTime(timestamp) {
      if (!timestamp) {
        return '';
      }
      const targetTime = Date.parse(timestamp); // 转换成时间戳
      const now = new Date().getTime(); // 获取当前时间戳
      const diff = Math.abs(now - targetTime); // 获取时间差的绝对值
      const diffMinutes = Math.floor(diff / (1000 * 60)); // 获取时间差的分钟数
      if (diffMinutes < 5) {
        return '刚刚'; // 小于5分钟，表示刚刚发布
      } else if (diffMinutes < 60) {
        return `${diffMinutes} 分钟前`; // 不超过1小时，显示几分钟前
      } else {
        const diffHours = Math.floor(diffMinutes / 60); // 超过1小时，显示几小时前
        if (diffHours < 24) {
          return `${diffHours} 小时前`; // 不超过1天，显示几小时前
        } else {
          const diffDays = Math.floor(diffHours / 24); // 超过1天，显示几天前
          return `${diffDays} 天前`;
        }
      }
    },
    //点击日期块获日期信息 和加载效果
    allCalendar(date) {
      // const loading = this.$loading({
      //   // lock: true,  //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了
      //   text: "拼命加载中",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      //取到你需要的日期data.day
      // console.info("date是", date)
      //需要用到这日期做啥事，比如做为调接口的参数
      // setTimeout(() => {
      //   this.getExamListForTimeLine(date)
      //   loading.close();
      // }, 300);

      // setTimeout(() => {
      //
      // }, 300);
      this.getExamListForTimeLine(date)
    },
    //查当前日期的测验日程
    getExamListForTimeLine(date) {
      const user = storage.getItem("user");
      const timeLineParam = {
        id: user.id,
        time: date
      }
      getExamListForTimeLineApi(timeLineParam).then(res => {
        if (res.data.code == 200) {
          this.examData = res.data.data;
          this.loading =false
          console.info("this.examData", this.examData)
        }
      })

    },
    onLoad() {
      //用于识别当前用户
      this.userData = storage.getItem("user");
      // console.info("this.userData",this.userData)

    },
    getMyHandleClassCount(){
      getMyHandleClassCountApi({teacherId: this.userData.id}).then(res=>{
        if (res.data.code==200){
          this.statisticsData.handleClassCount = res.data.data;
        }
      })
    },
    getMyCorrectAnswerPaperCount(){
      getMyCorrectAnswerPaperCountApi({teacherId: this.userData.id}).then(res=>{
        if (res.data.code==200){
          this.statisticsData.correctAnswerPaperCount = res.data.data;
        }
      })
    }
  },
  created() {
    this.onLoad()
    this.getExamListForTimeLine();
    this.getMyHandleClassCount();
    this.getMyCorrectAnswerPaperCount()
  }
}
</script>

<style scoped>

.custom-title {
  font-size: 17px;
  padding-bottom: 10px;
}

.section-title {
  margin-top: 0;
  margin-left: 10px;
  font-weight: 300;
  font-size: 24px;
  margin-bottom: 45px;
  text-align: start;
}

/deep/ .el-timeline-item__timestamp {
  color: #409EFF;
}

.is-selected-1 {
  font-size: 25px;
  color: #409EFF;
}

.el-icon-document-checked, .el-icon-s-flag {
  font-size: 30px;
}

/deep/ .secondTime{
  height: 30px;
  width: 50px;
  display: flex;
  justify-content-items: end;
  margin-top: 0px;
}

/deep/ .secondTime .number{
  padding-top: 13px!important;

}

</style>